<template>
    <div class="relative z-10000">
            <!-- <div @click="$emit('pushUrl', 'home')">
                <SvgIcon class="w-3.2rem h-3.2rem text-white cursor-pointer" local-icon="Frame3" />
            </div> -->
            <div class="absolute top-0 left-0 flex flex-col items-center justify-center mt-2rem z-1000">
                <div @click="csvEditShow = true" v-if="!isStarted">
                    <SvgIcon class="w-5rem text-green h-4.5rem  cursor-pointer"
                        icon="material-symbols:timer-play-outline" />
                </div>
                <div @click="stop" class="relative -top-1rem" v-if="isStarted">
                    <SvgIcon class="w-6.5rem text-red h-6.5rem cursor-pointer"
                        icon="material-symbols-light:stop-rounded" />
                </div>


                <span class="text-white relative -top-2rem text-1.6rem" v-if="isStarted">{{ clock }}</span>
            </div>
           
        <div id="csv">
            <NModal v-model:show="csvEditShow" to="#csv" :segmented="{ footer: 'soft' }" preset="card" auto-focus
                :mask-closable="false" footer-style="padding: 0; margin: 0"
                class="fixed left-0 right-0 top-10rem w-50rem">
                <NInput v-model:value="csvFile" class="mt-4rem" clearable placeholder="请输入CSV文件名"></NInput>
                <div class="flex items-center justify-end w-full h-full mt-2rem">
                    <NButton type="primary" size="small" class="ml-2rem" @click="start">确定</NButton>
                    <NButton type="error" size="small" class="ml-1rem" @click="csvEditShow = false">取消</NButton>
                </div>
            </NModal>
        </div>

    </div>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import { useMessage } from 'naive-ui'
import avatarPng from '@/assets/images/avatar.png';
import { stopClock, startClock } from '@/hooks/business/time';
import { destoryCsvInstance, createCsvInstance } from '@/hooks/business/csv';


interface Emits {
    (e: 'pushUrl', url: string): void;
}
const emit = defineEmits<Emits>();

const clock = ref<string>('00:00');
const csvFile = ref('');
const csvEditShow = ref(false)
const isStarted = ref<boolean>(false);


const message = useMessage()

function start() {
    if (csvFile.value.trim() === '') {
        message.warning("请输入CSV文件名");
        return;
    }
    createCsvInstance(csvFile.value.trim());
    startClock((val: string) => {
        clock.value = val;
    })
    isStarted.value = true;
    csvEditShow.value = false;
    csvFile.value = '';
}

function stop() {
    stopClock()
    destoryCsvInstance()
    isStarted.value = false;
    clock.value = '00:00'
    csvEditShow.value = false;
}
</script>

<style scoped lang="scss">
:deep(.n-modal) {
    background: rgba(78, 84, 141, 0.66) !important;
    box-shadow: none !important;
    // top: -35rem
}

:deep(.n-card-header) {
    display: none !important;
}
</style>